import React, { forwardRef,useRef,useImperativeHandle, useEffect }from 'react';

const CustomInput = forwardRef((props,ref)=>{
    const inputRef = useRef()
    console.log('inputRef2',inputRef); // 这里打印还么挂载完成 undefined

    useEffect(()=>{ 
        console.log('inputRef1-forwardRef',inputRef); // 这里拿到的是 input实例
    })
    useImperativeHandle(ref, ()=>({
        focusInput: ()=>{
            inputRef.current.focus();
        },
        getValue: ()=>{
            return inputRef.current.value;
        },
        send:()=>{

        }
    }))

    return (
        <div>
            <input ref={inputRef} type="text" />
        </div>
    )
})

function App(){
    const inputRef = useRef()
    useEffect(()=>{ 
        console.log('inputRef1-App',inputRef); // 拿到的是上面的三个方法
    })
    const focusInput = ()=>{
        inputRef.current.focus();
    }
    const getValue = ()=>{
        const value = inputRef.current.getValue();
        console.log('value',value);
    }

    return (
        <div>
            <CustomInput  ref={inputRef} />
            <button onClick={focusInput}>Focus Custom Input</button>
            <button onClick={getValue}>Get Value</button>
        </div>
    )
}

export default App
